

<template>
<!-- 轮播图 -->
<div class="sdy-home-banner">
      <van-swipe class="swiper-container" 
      :autoplay="800" indicator-color="green">
      <van-swipe-item
      v-for="item in bannerList"
      :key="item.bannerid">
      <van-image :src="item.img"></van-image>
    </van-swipe-item>
</van-swipe>


</div>
</template>

<script setup lang="ts">
// 请求轮播图的函数调用 
import {bannerListApi} from '@/api/banner'
// 轮播图接口设定
import type {MyBannerItem} from '@/config/inter'
// 引入vue方法
import {ref,onMounted} from 'vue'

// 提前准备一个数组,准备接受回来以后进行替换
// 用该数组渲染页面,因为涉及到替换,所以用响应式ref定义 
// reactive 不能用于数据替换

// MyBannerItem 数组限制类型 [] 保证限制的是一个数组
const bannerList = ref<MyBannerItem[]>([])

// 打开挂载完毕 
onMounted (async()=>{
  // 执行轮播图 数据请求
    const res = await bannerListApi()
    // console.log(res.data) 打印请求回来的数据看一下

  // 给响应创建出来的数组 赋值请求回来的数据 因为是ref 所以逻辑应用要加value
    bannerList.value = res.data
})

</script>

<style scoped lang="scss">
// 引入样式要加@
@import '@/styles/variable.scss';
.sdy-home-banner {
  height: 180px;
  position: relative;
  box-sizing: border-box;
  padding: 15px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    height: 100%;
    background-color: $globalColor;
    border-radius:  0 0 200px 200px / 0 0 40px 40px;
    z-index: -1;
  }

  > .swiper-container {
    width: 100%;
    height: 100%;
    background-color: orange;
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>